{extend name='./_content' }
{block name='mid'}
<div class="">
    <div class="jumbotron">
        <div class="container">
            <h1>Hello, world!</h1>
            <p>ztree</p>
            <p>
                <a class="btn btn-primary btn-lg" id="a_btn">Learn more</a>
            </p>
        </div>
    </div>

    <div class="modal fade" id="modal-ztree">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">ztree</h4>
                </div>
                <div class="modal-body">
                    <div class="ztree" id="ztree">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="btn_ok">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <script type="text/javascript">
        $(function () {
            view.init();
        });
        var view = {
            tree:null,
            dataUrl:'/index/city/data_list',
            init:function(){
                this.tree = $.fn.zTree.init($("#ztree"), this.treeSetting());
                $('#a_btn').on('click',this.a_btn);
                $('#btn_ok').on('click',this.btn_ok);
            },
            treeSetting:function () {
                var that = this;
                return {
                    async: {
                        enable: true,
                        type: 'post',
                        url: that.dataUrl,
                        autoParam: ["id"],
                        dataFilter: that.dataFilter
                    },
                    callback: {
                        onClick: that.onClick,
                        onExpand: that.onExpand
                    }, data: {
                        simpleData: {
                            enable: true
                        },
                        keep: {
                            parent: true
                        }
                    },
                    check: {
                        enable: true
                    }
                };
            },
            dataFilter:function (treeId, parentNode, ret) {
                //当后台获取的数据与在ztree所需要的数据不符时，就需要这个了
                var data = [];
                $(ret).each(function (i, item) {
                    //todo 数据
                    data.push({
                        name: item.full_name,
                        id: item.id,
                        pId: item.pid,
                        isParent: item.has_child,
                        obj: item
                    });
                });
                return data;
            },
            onClick:function (event, treeId, treeNode, clickFlag) {
                //点击树节点时触发
                console.log(treeNode);
            },
            a_btn:function () {
                $('#modal-ztree').modal();
            },
            btn_ok:function () {
                //获取选中的树节点
                var obj = view.tree.getCheckedNodes(true);
                console.log(obj);
            }
        };
    </script>
</div>
{/block}
